<template>
<!--我的订单-->
  <div class="orders">
    <div class="title ">
      学习证明
      <a href="javascript:history.back(-1)"><Button size="large" class="pull-right">返回</Button></a>
    </div>
    <ul>
      <li class="clearfix" v-for="item in proveList">
        <p>《{{item.certificateName}}》<span class="xueshi">完成 <span class="num">{{item.sumperiod}}</span> 学时</span>
            <span class="color666">{{item.awardTime}}</span></p> <Button size="large" class="pull-right" v-on:click="downloadProve(item)">下载证书</Button>
      </li>
    </ul>
    <span v-if="proveList.length < 1">
        <nodata tip="暂时还没有学习证明~"></nodata>
    </span>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .title{
    font-size: 20px;
    color: #000;
    padding-bottom: 20px;

    margin-bottom: 20px;
    border-bottom: 1px solid #E7E7E7;

    button {
      color: #B2936B;
      border: 1px solid #B2936B;
    }
  }
  li{
    font-size: 16px;
    color: #000;
    border-bottom: 1px dashed #DBDBDB;
    padding-bottom: 20px;
    padding-top: 20px;
    p{
      display: inline-block;
      margin-top: 6px;
    }
    span{
      font-size: 14px;
    }
    .color666{
      color: #666;
    }
    .xueshi{
      margin: 0 100px;
    }
    .num{
      color: #957960;
    }
    button{
      color: #B2936B;
      border:1px solid #B2936B;
    }
  }


</style>
<script type="text/ecmascript-6">
    import centers from '../template/center'
    import {prooRemark, downCertifite} from '../../http'
    import nodata from '../template/null'
    export default {
        name: 'studyProve',
        props: {
        },
        data() {
            return {
              proveList: []
            };
        },
        methods: {
          getInfo(){
            prooRemark().then(res => {
              if(res.code === 200) {
                this.proveList = res.data;
              }
              console.info(res)
            })
          },
          downloadProve(v){
            downCertifite({userCertifiId: v.id}).then(res => {
              this.$router.push({
                name:'sliderhtml',
                query:{
                  content: res,
                  title: v.certificateName,
                }
              })
            })
          }
        },
        created() {
          this.getInfo()
        },
        components: {
          nodata,
          centers
        }
    }
</script>
